<template>
  <div class="pagination">
    <el-pagination
    :page-size="10"
    :pager-count="11"
    layout="prev, pager, next"
    :total="total"
    @current-change="currentChange"
  >
  </el-pagination>
  </div>
</template>
<script>
// import { ref } from 'vue-demi'
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      default: 100
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  setup (props, { emit }) {
    // 当前显示的页码
    // const currPage = ref(1)
    // 总条数
    // const total = ref(100)
    // 每页显示的条数
    // const pageSize = ref(10)
    // return { total, pageSize }
    const currentChange = (currentPage) => {
      console.log(currentPage)
      emit('current-change', currentPage)
    }
    return { currentChange }
  }
}
</script>
<style lang="less" scoped>
.pagination{
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
